<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" placeholder="商超名称" v-model="params.sysName" style="width: 150px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.status" filterable placeholder="启用状态" style="width: 120px;" clearable>
          <el-option value="10" label="启用"></el-option>
          <el-option value="20" label="停用"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getMarkeList(1)">搜索</el-button>
      <el-button v-if="btnPower.AddMarket" class="filter-item" type="primary" icon="el-icon-document" @click="getMarketButton()">添加</el-button>
    </div>
    <el-table
      :data="marketLists"
      v-loading="listLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="sysName"
        label="商超名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        :formatter="marketState"
        label="状态"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        prop="shopCount"
        label="门店数"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button v-if="btnPower.RevMarket" type="primary" size="small" @click="getMarketButton(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getMarkeList" />
    <el-dialog
      :title="marketPopupType==1?'添加商超':'编辑商超'"
      :visible.sync="marketPopup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="商超名称" prop="sysName">
          <el-input v-model="ruleForm.sysName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="10">启用</el-radio>
            <el-radio :label="20">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="marketPopup = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { marketList, addRevMarket } from '@/api/api.verify.js'

export default {
  components:{Pagination},
  name: 'MarketList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      total:0,//总条数
      marketLists:[],//商超列表
      params:{
        current: 1,
        size: 10,
        status:"10",
        sysName:null//查询商超名称
      },//查询条件
      marketPopupType:1,//1 添加  2 编辑
      marketPopup:false,//商超弹窗状态
      ruleForm: {
        id: null,//编辑id
        sysName:null,
        status:10
      },
      rules: {
        sysName: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
        ],
        status: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
      }
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){//初始化
      this.getMarkeList()
    },
    getMarkeList(e) {//获取商超列表
      if(e==1){this.params.current=1;};
      let _this = this
      let data=this.params
      this.listLoading = true
      marketList(data).then(d=>{
        _this.marketLists = d.data.records;
        _this.total = Number(d.data.total);
      }).finally(d=>{
        _this.listLoading = false
      });
    },
    getMarketButton(e){//点击添加编辑商超
      if (e) {//修改
        this.marketPopupType=2
        this.ruleForm.id=e.id
        this.ruleForm.sysName=e.sysName
        this.ruleForm.status=e.status
      }else{//添加
        this.marketPopupType=1
        this.ruleForm.id=null
        this.ruleForm.sysName=null
        this.ruleForm.status=10
      }
      this.marketPopup=true
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if(valid) {
          _this.getForm()
        } else {
          return false;
        }
      });
    },
    getForm(){//提交表单
      let _this=this
      let data=_this.ruleForm
      let method = "POST"
      let alerts = "添加"
      if(this.marketPopupType==2){
        method = "PUT"
        alerts = "修改"
      }
      addRevMarket(data,method).then(d=>{
        _this.$message({
          type: 'success',
          message: alerts+'成功!'
        });
        _this.marketPopup=false
        _this.getMarkeList(1)
      });
    },

    marketState(row, column, cellValue, index) {//商超状态转换
      let type = row.status;
      if (type == 10) {
        return '开通';
      } else if (type == 20) {
        return '关闭';
      } else {
        return '删除';
      }
    },
  },
  watch:{
    'params.sysName':function(val){
      let _this=this;
      if(val==""){
        _this.params.sysName=null
      }
    },
  }
}
</script>

